<template>
  <el-form :model="tableForm" ref="formRef">
    <div style="margin-bottom: 10px"><span style="color:var(--color-danger);margin-right: 4px">*</span>任务详情：</div>
    <div style="margin-left: 10px">
      <el-table :data="tableForm.table" border :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号" fixed width="50"></el-table-column>
        <el-table-column label="任务名称" width="200">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.type`"
                          :rules="{required: true, message: '任务名称为必需', trigger: 'blur'}">
              <el-select v-model="scope.row.type" placeholder="请选择任务名称">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="计划开始日期" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.plan_start_at`"
                          :rules="{required: true, message: '计划开始日期为必需', trigger: 'blur'}">
              <el-date-picker
                :picker-options="{disabledDate:(time)=>{
                  if(scope.row.plan_complete_at){
                    return Date.parse(scope.row.plan_complete_at)<=Date.parse(time)
                  }
                }}"
                v-model="scope.row.plan_start_at"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="计划结束日期" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.plan_complete_at`"
                          :rules="{required: true, message: '计划开始结束为必需', trigger: 'blur'}">
              <el-date-picker
                :picker-options="{disabledDate:(time)=>{
                  if(scope.row.plan_start_at){
                    return Date.parse(time)+1000*24*60*60<=Date.parse(scope.row.plan_start_at)
                  }
                }}"
                v-model="scope.row.plan_complete_at"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <!--        <el-table-column label="任务比重（%）" width="220">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-form-item label-width="0" :prop="`table.${scope.$index}.percent`"-->
        <!--                          :rules="{required: true, message: '任务比重为必需', trigger: 'blur'}">-->
        <!--              <el-input-number :min="0" :max="100" placeholder="请输入任务比重" v-model="scope.row.percent"/>-->
        <!--            </el-form-item>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column label="计划设备数量" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.plan_product_quantity`"
                          :rules="{required: true, message: '计划设备数量必需', trigger: 'blur'}">
              <el-input-number :min="0" :max="100" placeholder="请输入计划设备数量" v-model="scope.row.plan_product_quantity"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="计划工时（小时）" width="220">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.plan_work_hour`"
                          :rules="{required: true, message: '计划工时为必需', trigger: 'blur'}">
              <el-input-number :min="0" :step="0.5" v-model="scope.row.plan_work_hour" placeholder="请输入工时"
                               type="number"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="负责人" width="210">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`table.${scope.$index}.user_ids`"
                          :rules="{required: true, message: '负责人为必需', trigger: 'blur'}">
              <PrincipalSelect :limit="true" v-model="scope.row.user_ids"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="80">
          <template slot-scope="scope">
            <el-link type="danger" style="font-size: 18px" icon="el-icon-delete"
                     :disabled="tableForm.table.length<=1"
                     @click="delList(scope.$index)"></el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-btn" @click="addList" style="margin-top: 5px"><i class="el-icon-plus"></i></div>
    </div>
  </el-form>
</template>

<script>
import PrincipalSelect from "@/views/project/task/components/PrincipalSelect.vue";

export default {
  name: "editTable",
  props: ['typeList'],
  components: {PrincipalSelect},
  data() {
    return {
      loading: false,
      options2: [],
      tableForm: {
        table: [
          {
            type: "",
            plan_start_at: "",
            plan_complete_at: '',
            plan_product_quantity: '',
            plan_work_hour: '',
            user_ids: '',
          }
        ]
      },
    }
  },
  watch: {
    'tableForm.table': {
      handler(current) {
        this.$emit('update:table', current)
      },
      deep: true
    }
  },
  methods: {
    addList() {
      this.tableForm.table.push(
        {
          type: "",
          plan_start_at: "",
          plan_complete_at: '',
          plan_product_quantity: '',
          plan_work_hour: '',
          user_ids: '',
        }
      )
    },
    delList(index) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableForm.table.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    validate() {
      let flag
      this.$refs.formRef.validate(valid => flag = valid)
      return flag
    },
  }

}
</script>

<style scoped lang="scss">

.el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.add-btn {

  height: 57px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--color-primary);
  //letter-spacing:1rem;
  i {
    font-size: 18px;
    color: var(--color-primary);
    font-weight: bolder;
  }

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  &:active {
    color: var(--color-primary-7);
    border-color: var(--color-primary-7);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }
}


</style>

